import { useEffect, useState } from 'react'

export const day02_01 = function () {
    const [list, setList] = useState([])
    // 示例
    // useEffect(() => {
    //     async function login() {
    //         const res = await fetch('http://10.100.102.83:9998/api/auth/login')
    //         const data = await res.json()
    //         setList(data.message.split('/'))
    //     }
    //     login()
    // })

    const [count, setCount] = useState(0)
    const [count1, setCount1] = useState(0)
    const [show, setShow] = useState(true)
    // 1.useEffect 没有依赖项 => 初始化 + 组件更新时执行
    // useEffect(() => {
    //     console.log('useEffect执行了')
    // })

    // 2.useEffect 传入空数组依赖  => 初始化执行
    // useEffect(() => {
    //     console.log('useEffect执行了')
    // }, [])

    // 3.useEffect 传入特殊依赖 => 初始化 + 依赖项变化时执行
    // useEffect(() => {
    //     console.log('useEffect执行了', count)
    // }, [count])

    // 清除副作用
    useEffect(() => {
        return () => {
            //清除副作用
        }
    })
    return (
        <>
            <h3>day02_01</h3>
            <div> count: {count}</div>
            <button onClick={() => setCount(count + 1)}>count ++</button>
            <div> count1: {count1}</div>
            <button onClick={() => setCount1(count1 + 1)}>count ++</button>
            {list.map(listItem => (
                <div key={listItem}>{listItem}</div>
            ))}

            <br />
            {show && <Son />}
            <br />
            <button onClick={() => setShow(false)}>unMounted</button>
        </>
    )
}

function Son() {
    useEffect(() => {
        let interval = setInterval(() => {
            console.log('定时任务执行中')
        }, 1000)
        return () => {
            clearInterval(interval)
        }
    }, [])
    return <>Component Son</>
}
